
<template>
    <div class="login">
        <md-field>
            <md-input-item ref="name" title="手机号" v-model="mobile" placeholder="请输入手机号" clearable is-title-latent>
            </md-input-item>
            <!--
            <md-input-item ref="id" title="验证码" v-model="smsCode" placeholder="请输入验证码" clearable is-title-latent>
                <div class="input-operator" slot="right">
                <md-button :type="smsSendLoginFlag?'disabled':'primary'" size="small" inline round @click="smsSend()">
                    {{smsSendLoginFlag?(sendSmsTime+'重新发送'):'获取验证码'}}</md-button>
                </div>
            </md-input-item>
            -->
            <!--
            <md-input-item type="password" title="密码" v-model="password" placeholder="请输入密码" clearable is-title-latent>
            </md-input-item>
            -->
            <div class="slider-box" v-show="show">
                <noTraceCheck 
                    ref="notrace" 
                    :scene="scene" 
                    :systemType="systemType" 
                    :businessType="businessType"
                    :bizValue="bizValue"
                    :bizData="bizData"
                    @callBack="callBack"
                >
                </noTraceCheck>
            </div>
            <md-button v-show="!show" id="A01" class="loginBtn" :type="loginLodingFlag?'disabled':'primary'" @click="login()">发送验证码</md-button>
        </md-field>
        <md-captcha
            ref="captcha"
            v-model="captchaShow"
            :title="title"
            :maxlength="limit ? parseFloat(maxlength) : -1"
            :system="system"
            :mask="mask"
            @submit="submit"
            @show="onShow"
            @hide="onHide"
            @send="onSend"
        >
            {{content}}
        </md-captcha>
    </div>
</template>

<script>
import {
    Button,
    InputItem,
    Field,
    Toast,
    Captcha
} from 'mand-mobile'
import {
    validator
} from '@/utils/common'
import $customer from '@/api/customer'
export default {
    data() {
        return {
            smsSendLoginFlag: false,
            sendSmsTime: 10,
            scene: 'nvc_message_h5', // 使用场景标识
            systemType: 'C', // 系统类型
            businessType: 'D', // 业务类型
            bizValue: '', // 业务主键值,如：手机号
            bizData: '', // 备注，格式为JSON
            mobile: '14785850955', // 手机号
            password: '123123',
            smsCode: '',
            show: false,
            captchaShow: false,
            title: '输入验证码',
            limit: true,
            maxlength: '4',
            mask: false,
            system: false,

        }
    },
    components: {
      'md-button': Button,
      'md-field': Field,
      'md-input-item': InputItem,
      [Captcha.name]: Captcha,
      noTraceCheck: () => import('@/components/noTraceCheck'),
    },
    computed: {
        loginLodingFlag() {
            if(!validator.isEmpty(this.mobile)) {
                return true
            } else {
                return false
            }
        },
        content() {
            return `验证码已发送至 ${this.mobile}`
        }
    },
    methods: {
        submit(code) {
            console.log(code)
        },
        onShow() {

        },
        onHide() {
            this.mobile = ''
            this.show = false
            console.log(222)
        },
        onSend() {

        },
        login() {
            if (!validator.isEmpty(this.mobile)) {
                return Toast.info('请输入手机号')
            }
            console.log(window)
            this.bizValue = this.mobile
            this.$refs.notrace.init()
        },
        callBack({status,ssId}) {
            console.log(status,ssId)
            let _this = this
            if(status) {
                ssId = '123123'
                this.$store.dispatch('setSsid', ssId)
                let datas = {
                    userId: 'gh', // 系统类型
                    password: 'xqwx', // 平台类型
                    systemType: this.systemType,
                    businessType: this.businessType,
                }
                $customer.logines(datas).then(res => {
                    console.log(res)
                })
                this.captchaShow = true
            } else {
                // Toast.info('发送短信验证码失败')
                this.show = true
            }
        },
        // 发送短信验证码
        smsSend() {
            let _this = this
            if (!validator.isEmpty(_this.mobile)) {
                return Toast.info('请输入手机号')
            }
            this.bizValue = this.mobile
            this.$refs.notrace.init()
        }
    }
}
</script>

<style lang="less" scoped>
    .slider-box {
        width: 100%;
        height: 100px;
        margin-top: 80px;
    }
    .loginBtn {
        margin-top: 80px;
    }
</style>